<template>
  <div id="viewDiv"></div>
</template>
<script>
  import SceneView from "@/geoscene/core/views/SceneView"
  import Map from "@/geoscene/core/Map"
  import Camera from "@/geoscene/core/Camera"
  var AppConfig = {
    map: new Map({
      basemap: "satellite",
      ground: "world-elevation",
    }),
    camera: new Camera({
      heading: 90, // face due east
      tilt: 45, // looking from a bird's eye view
      position: {
        latitude: 25.056,
        longitude: 102.7335,
        z: 20000,
        spatialReference: { wkid: 102100 }
      }
    }),
  }
  var loadMap = (layers) => {

  }

  onMounted(() => {
    const view = new SceneView({
      container: "viewDiv",
      map: AppConfig.map,
      camera: AppConfig.camera,
    })

    const elevationLayer = new ElevationLayer({
      url:
        "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_After_3DTerrain/ImageServer",
      visible: false
    });
  })
  AppConfig.map.ground.when(() => {
    AppConfig.map.ground.layers.add(elevationLayer);
  });

</script>
<style>
  #viewDiv {
    height: 100%;
    width:  100%;
    min-width: 375px;
    min-height: 375px;
  }
</style>